<template>
  <div class="container">
    <van-nav-bar fixed placeholder>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button
          icon="search"
          type="primary"
          round
          @click="$router.push({ path: '/search' })"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- 2.tab栏 -->
    <van-tabs v-model="active" title-active-color="tomato" @click="tabClick">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" @load="onLoad">
            <van-cell
              v-for="item in list"
              :key="item.art_id.toString()"
              :title="item.title"
              @click="
                $router.push({ path: '/article', query: { id: item.art_id } })
              "
            >
              <template #label>
                <van-grid :column-num="item.cover.type">
                  <van-grid-item
                    v-for="(img, index) in item.cover.images"
                    :key="index"
                  >
                    <van-image :src="img" lazy-load /> </van-grid-item
                ></van-grid>
                <div>
                  <span> {{ item.aut_name }} </span
                  ><span> ({{ item.comm_count }})评论 </span
                  ><span> {{ item.pubdate | thatTime }} </span>
                </div>
              </template>
            </van-cell>
          </van-list></van-pull-refresh
        >
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getChannels, getArticle } from './home.js'

export default {
  name: 'home',
  data () {
    return {
      active: 0,
      list: [],
      loading: false,
      finished: false,
      isLoading: false,
      refreshing: false,
      channels: [],
      timestamp: null
    }
  },
  methods: {
    async onLoad () {
      if (this.refreshing) {
        this.list = []
        this.refreshing = false
        this.timestamp = null
      }
      // 如果第一次请求 发送当前时间戳
      if (!this.timestamp) {
        this.timestamp = Date.now()
      }
      //发送请求
      let res = await getArticle({
        channel_id: this.channels[this.active].id,
        timestamp: this.timestamp
      })
      //修改timestamp为下一页的时间戳
      console.log(res)
      this.timestamp = res.data.pre_timestamp
      this.list.push(...res.data.data.results)

      //加载状态结束
      this.loading = false
      // 数据全部加载完成
    },
    onRefresh () {
      //一下拉就
      this.finished = false
      this.list = [] //清空list
      this.refreshing = false
      this.loading = true //加载更多提示
      this.onLoad() //重新请求数据
      this.isLoading = false //关闭上拉动画
    },
    tabClick () {
      this.list = []
      this.loading = true
      this.onLoad()
      this.timestamp = null
    }
  },
  async created () {
    let res = await getChannels()
    console.log(res)
    this.channels = res.data.data.channels
  }
}
</script>

<style lang="less">
// 解决页面滑动过快出现留白问题
.body {
  overflow: hidden;
}
.container {
  height: 100vh;
  box-sizing: border-box;
  padding-top: 46px;
  padding-bottom: 50px;

  .van-nav-bar {
    .logo {
      background: url('~@/assets/logo.png') no-repeat;
      background-size: cover;
      width: 100px;
      height: 30px;
    }
    .van-button {
      width: 100px;
      background-color: #1dadfb;
      color: #fff;
      outline: none;
      border: none;
      .van-icon {
        color: #fff;
      }
    }
  }
  .van-tabs {
    height: 100%;
    // padding-top: 44px;
    box-sizing: border-box;
    .van-tabs__wrap {
      position: fixed;
      width: 100%;
      left: 0;
      top: 46px;
      z-index: 10;
    }
    .van-tabs__content {
      overflow-x: auto;
      height: 100%;
    }
  }
}
</style>
